<template>
  <lc-rower>
    <el-image
      style="width: 100px; height: 100px"
      :preview-src-list="previewList"
      :src="props.imageConfig.url"
      :fit="props.imageConfig.fit"
      :lazy="props.imageConfig.lazy"
    >
      <template #placeholder>
        <slot name="loadingSlot">
          <!-- 占位插槽 -->
        </slot>
      </template>
      <template #error>
        <slot name="errorSlot">
          <!-- 自定义加载失败插槽 -->
        </slot>
      </template>
    </el-image>
  </lc-rower>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    imageConfig: any;
  }>(),
  {
    imageConfig: {
      url: "",
      fit: "",
      lazy: false,
    },
  },
);

const previewList = ref([props.imageConfig.url]);
</script>
